//header.jsx
import { useState } from 'react';
import { Layout, Button, Typography, Divider, Select, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import PropTypes from 'prop-types';

import './header.less';

const { Header } = Layout;
const { Title, Text } = Typography;
const { Option } = Select;

const ProductManagement2 = ({ setIsAdding  }) => {
    const [popularity, setPopularity] = useState('');
    const [commodityName, setCommodityName] = useState('');
    const [categoryId, setCategoryId] = useState('');
    const [inventoryStatus, setInventoryStatus] = useState('');

    const handleSearch = () => {
        setFilterConditions({ popularity, commodityName, categoryId, inventoryStatus });
    };
    return (
        <div>
            <Layout>
                <Header style={{
                    background: '#fff',
                    padding: '10px',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'start',
                    height: 'auto'
                }}>
                    <Divider style={{ margin: '1px 0', width: '100%' }} />
                    <Title level={4} style={{ marginBottom: '0.5em', fontSize: '16px' }}>商品管理</Title>
                    <Text style={{ fontSize: '12px', marginBottom: '8px' }}>
                        仓库商品信息展示，可以进行新增商品，搜索商品，编辑商品，删除商品操作
                    </Text>

                    <Divider style={{ margin: '8px 0', width: '100%' }} />
                    <div className="filter">
                        <Select placeholder="火爆程度" style={{ width: 120, marginRight: 16 }} onChange={setPopularity}>
                            <Option value="high">高</Option>
                    
                            <Option value="low">低</Option>
                        </Select>
                        <Input placeholder="商品名称" style={{ width: 200, marginRight: 16 }} onChange={(e) => setCommodityName(e.target.value)} />
                        <Select placeholder="商品分类" style={{ width: 200, marginRight: 16 }} onChange={setCategoryId}>
                            <Option value="category1">分类1</Option>
                            <Option value="category2">分类2</Option>
                        </Select>
                        <Select placeholder="库存状态" style={{ width: 200, marginRight: 16 }} onChange={setInventoryStatus}>
                            <Option value="inStock">有库存</Option>
                            <Option value="outOfStock">无库存</Option>
                        </Select>
                        <Button type="primary" shape="circle" icon={<SearchOutlined />} style={{ marginRight: 16 }}  onClick={handleSearch}></Button>
                        <Button type="primary" onClick={() => setIsAdding(true)}>添加商品</Button>
                    </div>
                </Header>
            </Layout>
        </div>
    );
};

ProductManagement2.propTypes = {
    setIsAdding: PropTypes.func.isRequired,
};

export default ProductManagement2;
